<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '天琴币',
    navigationBarRightButton: {
      hide: true,
    },
  },
}
</route>
<template>
  <view
    class="w-full h-full bg-white overflow-hidden box-border"
    :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
  >
    <view class="w-full h-full home-container">
      <wd-navbar @click-left="handleClickLeft">
        <template #title>
          <text class="text-gray-333 font-size-36 font-500">天琴币</text>
        </template>
        <template #left>
          <wd-icon
            name="chevron-left"
            class="text-gray-333 font-size-44"
            @click="pagesBack"
          ></wd-icon>
        </template>
      </wd-navbar>
      <view class="w-full h-full p-x-28 p-y-32 home-content">
        <view class="w-full hr-396 p-x-28 p-y-32 box-border b-rd-16 content-bg">
          <view class="flex justify-between">
            <view class="font-size-28 text-gray-333 font-500 line-height-none">
              <view class="font-size-28">可用天琴币</view>
              <view class="font-size-56 mg-t-16">{{ tqCurrencyList[0].value }}</view>
            </view>
            <view class="wr-180 hr-70">
              <wd-button type="primary" size="small">
                <text class="font-size-32">去使用</text>
              </wd-button>
            </view>
          </view>
          <view class="flex justify-start mg-t-48">
            <view
              class="w-full line-height-none"
              v-for="(item, index) in tqCurrencyList"
              :key="index"
            >
              <view class="font-size-24 text-gray-666 font-400">{{ item.name }}</view>
              <view class="font-size-40 text-gray-333 font-500 mg-t-16">{{ item.value }}</view>
            </view>
          </view>
          <view class="flex jusitfy-start mg-t-48">
            <view
              class="flex justify-start items-center text-gray-666 mg-r-84 line-height-none"
              v-for="(item, index) in tqHandleList"
              :key="index"
              @click="handleMenu(item)"
            >
              <view class="font-size-24 font-400">{{ item.name }}</view>
              <wd-icon name="chevron-right" class="font-size-34 mg-l-4"></wd-icon>
            </view>
          </view>
        </view>
        <view class="flex">
          <wd-tabs v-model="tab" @change="handleTabChange">
            <block v-for="item in tabHeader" :key="item">
              <wd-tab :title="item.title">
                <view class="w-full tabs-container">
                  <view class="w-full" v-for="(item, index) in tabContentList" :key="index">
                    <view class="flex justify-center flex-col hr-142">
                      <view
                        class="flex justify-between items-center font-400 font-size-32 line-height-none"
                      >
                        <view class="text-gray-333">{{ item.type }}</view>
                        <view class="text-blue-1" v-if="item.amount > 0">+{{ item.amount }}</view>
                        <view class="text-gray-333" v-else>-{{ item.amount }}</view>
                      </view>
                      <view class="text-gray-999 font-400 font-size-24 mg-t-20 line-height-none">
                        {{ item.create_time }}
                      </view>
                    </view>
                    <view class="w-full hr-2 bg-#f5f5f5"></view>
                  </view>
                </view>
              </wd-tab>
            </block>
          </wd-tabs>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getBonusRecord } from '@/service/my/my'
import { useUserStore } from '@/store/user'
const userStore: any = useUserStore()

defineOptions({
  name: 'tqCurrency',
})
const { safeAreaInsets } = uni.getSystemInfoSync()
const handleClickLeft = () => {}
const pagesBack = () => {
  uni.switchTab({
    url: '/pages/home/person',
  })
}
const tqCurrencyList = ref([
  {
    name: '可用天琴币',
    value: '0.00',
  },
  {
    name: '冻结中',
    value: '0.00',
  },
  {
    name: '已使用',
    value: '0.00',
  },
])
const tqHandleList = ref([{ name: '天琴币流水' }, { name: '使用规则' }])
const handleMenu = (item: any) => {
  if (item.name === '使用规则') {
    uni.navigateTo({
      url: '/pages/person/boundsRule',
    })
  }
}
const tab: any = ref(0)
const tabParam: any = ref(-1)
const tabHeader = ref([{ title: '全部' }, { title: '获取' }, { title: '消耗' }])
const tabContentList: any = ref([])
onLoad(() => {})
onShow(() => {
  getData()
})
const handleTabChange = (ev: any) => {
  tabParam.value = ev.index - 1
  getData()
}
const getData = () => {
  getBonusRecord(tabParam.value).then((res: any) => {
    if (res.data.data) {
      tabContentList.value = res.data.data
    }
  })
  const userInfo: any = userStore.userInfo.user
  tqCurrencyList.value[0].value = userInfo.bonus
  tqCurrencyList.value[1].value = userInfo.bonus_frozen
  tqCurrencyList.value[2].value = userInfo.bonus_used
}
</script>

<style scoped lang="scss">
.home-container {
  position: relative;
  z-index: 1;
}
.home-content {
  height: calc(100% - var(--wot-navbar-height, 88rpx));
  overflow: auto;
  background: #fff;
}
.content-bg {
  background: linear-gradient(128deg, #f5f0ff 0%, #dfdfff 100%);
}
.tabs-container {
  box-sizing: border-box;
  overflow: auto;
  background: #fff;
}
::v-deep .wd-button {
  width: 100% !important;
  height: 100% !important;
}
::v-deep .wd-tabs__nav-item {
  font-size: 32rpx !important;
  color: #312f2a !important;
}
</style>
